<template>
  <div class="index">
    <Header></Header>
    <div class="middle">
      <el-row :gutter="20">
        <el-col :span="8"><div class="middle-box"><img src="../assets/img/Log.png" alt="" @click="toLog"> 日志查询</div> </el-col>
        <el-col :span="8"><div class="middle-box"><img src="../assets/img/jurisdiction.png" alt="" @click="toJurisdiction">权限申请配置</div></el-col>
        <el-col :span="8"><div class="middle-box"><img src="../assets/img/history.png" alt="" @click="toHistory"> 历史记录</div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8"><div class="middle-box"><img src="../assets/img/data.png" alt="" @click="tolog">数据展示</div></el-col>
        <el-col :span="8"><div class="middle-box"><img src="../assets/img/resources.png" alt="" @click="tolog">资源配置</div></el-col>
        <el-col :span="8"><div class="middle-box"><img src="../assets/img/search.png" alt="" @click="tolog">智搜</div></el-col>
      </el-row>
    </div>
  </div>
</template>

<script >
  import Header from '../components/header'
export default {
    components:{
      Header
    },
  methods:{
    toLog(){
      this.$router.push({
        name:'Log'
      })
    },
    toHistory(){
      this.$router.push({
        name:'History'
      })
    },
    toJurisdiction(){
      this.$router.push({
        name:'Jurisdiction'
      })
    },
  }
}
</script>
<style lang="less" scoped>
  .index{i
    width: 100%;
    height: 100%;
    position: absolute;
    background: url("../assets/img/bg.png");
    display: flex;
    flex-direction: column;
    align-items: center;
    .middle{
      margin-top: 161px;
      height: 548px;
      width: 1500px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .middle-box{
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .el-row{
        .el-col{
          color: #01c4f7;
        }
      }
    }
  }




</style>
